export const renderCircle = function(canvas,numberContent,width,height,options){
  let radius = width/2; //外环半径
  let thickness = width/2*0.2; //圆环厚度
  let startAngle = -90; //开始角度

  //进度条颜色  目前还不能用渐变色
  // var lingrad = ctx.createLinearGradient(0, 0, 150, 0);
  // lingrad.addColorStop(0, options.startColor);
  // lingrad.addColorStop(1, options.endColor);
  // ctx.fillStyle = lingrad;

  //渲染函数
  function renderRing(startAngle, endAngle,isEnd) {
    canvas.width = width ;
    canvas.height = height ;

    let x = width/2; //圆心x坐标
    let y = height/2; //圆心y坐标
    let ctx = canvas.getContext("2d");

  

    //绘制底部的环
    ctx.beginPath();
    ctx.lineWidth = thickness;
    ctx.strokeStyle = options.bottomColor; 
    ctx.arc(x, y, radius - thickness, 0, Math.PI*2);
    ctx.stroke();

  
    //计算起点圆的中心坐标
    let oneCtrlPoint = calcRingPoint(
      x, y,
      radius - thickness ,
      startAngle
    );

    //绘制起点处的圆
    ctx.beginPath();
    ctx.fillStyle =  options.startColor; 
    ctx.arc(
      oneCtrlPoint.x,
      oneCtrlPoint.y,
      thickness/2,
      0,
      Math.PI*2
    );
    ctx.fill();


    //绘制顶部的环
    ctx.beginPath();
    ctx.lineWidth = thickness;
    ctx.strokeStyle = options.startColor; 
    ctx.arc(x, y, radius - thickness, angle2Radian(startAngle), angle2Radian(endAngle));
    ctx.stroke();



    if(isEnd){
      //计算外环与内环第二个连接处的中心坐标
      let twoCtrlPoint = calcRingPoint(
        x, y,
        radius - thickness,
        endAngle
      );

      //绘制终点点处的圆
      ctx.beginPath();
      ctx.fillStyle =  options.startColor; 
      ctx.arc(
        twoCtrlPoint.x,
        twoCtrlPoint.y,
        thickness/2,
        0,
        Math.PI*2
      );
      ctx.fill();
    }
  }

  //计算圆环上点的坐标
  function calcRingPoint(x, y, radius, angle) {
    let res = {};
    res.x = x + radius * Math.cos((angle * Math.PI) / 180);
    res.y = y + radius * Math.sin((angle * Math.PI) / 180);
    return res;
  }

  //弧度转角度
  // function radian2Angle(radian) {
  //   return (180 * radian) / Math.PI;
  // }

  //角度转弧度
  function angle2Radian(angle) {
    return (angle * Math.PI) / 180;
  }


  //开始绘画
  let tempAngle = startAngle;
  let now = options.now;
  let total = options.total;
  let percent = now / total; //百分比
  let twoEndAngle = percent * 360 + startAngle;
  let step = (twoEndAngle - startAngle) / 100;
  let numStep = percent / 100 ;
  let num = 0;
  let inter = setInterval(() => {
    if (tempAngle > twoEndAngle) {
      numberContent.innerText = percent * 100;
      clearInterval(inter);
      renderRing(startAngle, tempAngle,true);
    } else {
      tempAngle += step;
      renderRing(startAngle, tempAngle);
      num += numStep;
      numberContent.innerText = (num *100).toFixed(2);
    }
    
  }, 20);
}